<template>
  <div>
    <div class="equip-wrap-common">
      <px-row style="padding-top: 20px">
        <px-col>
          <px-button type="primary" icon="ArrowLeft" @click="handleManage">返回</px-button>
        </px-col>
      </px-row>
      <px-form
        class="custom-form-ui equip-form"
        :model="queryParams"
        label-position="right"
        label-width="120px"
        style="padding-top: 14px"
        @submit.native.prevent
      >
        <px-row :gutter="16" justify="space-between">
          <px-col :span="16">
            <px-row :gutter="16">
              <px-col :span="16">
                <px-form-item label="公告标题">
                  <px-input
                    v-model="queryParams.title"
                    placeholder="请输入公告标题"
                    maxlength="50"
                    clearable
                    @blur="queryParams.title = $event.target.value.trim()"
                    @keyup.enter="queryTable"
                  >
                    <template #suffix>
                      <px-icon style="cursor: pointer" @click="queryTable">
                        <search />
                      </px-icon>
                    </template>
                  </px-input>
                </px-form-item>
              </px-col>
              <px-col :span="8">
                <px-button type="primary" @click="queryTable">查询</px-button>
                <px-button @click="resetTable">重置</px-button>
              </px-col>
            </px-row>
          </px-col>
          <px-col :span="3" style="text-align: right">
            <px-button v-has="'ALL_BENCH_TASK_ANNOUNCEMENT_ADD'" type="primary" @click="handleEdit()">新增</px-button>
          </px-col>
        </px-row>
      </px-form>
      <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 303px)" border>
        <px-table-column label="序号" width="50" align="center" fixed="left">
          <template #default="{ $index }">
            {{ $index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize }}
          </template>
        </px-table-column>
        <px-table-column prop="title" label="公告标题" min-width="270" fixed="left" show-overflow-tooltip />
        <px-table-column prop="publishRangeDesc" label="发布范围" width="200" show-overflow-tooltip />
        <px-table-column prop="readNumber" label="已读/未读" width="100" v-has="'ALL_BENCH_TASK_ANNOUNCEMENT_READ_INFO'">
          <template #default="scope">
            <px-popover
              :width="200"
              placement="right-start"
              trigger="click"
              popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
            >
              <template #reference>
                <div class="read" @click="handleClick(scope.row)">
                  <span style="color: rgb(0 0 0 / 50%)">{{ scope.row.readNumber }}</span
                  >/<span style="color: rgb(59 130 246 / 100%)">{{ scope.row.unreadNumber }}</span>
                </div>
              </template>
              <template #default>
                <px-tabs v-model="activeName">
                  <px-tab-pane :label="`${scope.row.readNumber}已读`" name="read">
                    <px-scrollbar class="tab-scrollbar">
                      <div v-for="item in userReaded.readList" :key="item.acceptorId" class="read-name">{{ item.realName }}</div>
                    </px-scrollbar>
                  </px-tab-pane>
                  <px-tab-pane :label="`${scope.row.unreadNumber}未读`" name="unread">
                    <px-scrollbar class="tab-scrollbar">
                      <div v-for="item in userReaded.unreadList" :key="item.acceptorId" class="read-name">{{ item.realName }}</div>
                    </px-scrollbar>
                  </px-tab-pane>
                </px-tabs>
              </template>
            </px-popover>
          </template>
        </px-table-column>
        <px-table-column prop="publishStatus" label="发布状态" width="100">
          <template #default="scope">
            <px-tag v-if="scope.row.publishStatus === 'PUBLISH'" type="success">已发布</px-tag>
            <px-tag v-else>未发布</px-tag>
          </template>
        </px-table-column>
        <px-table-column prop="publishTime" label="发布时间" width="170">
          <template #default="scope">
            <div v-if="scope.row.publishTime">{{ scope.row.publishTime }}</div>
            <div v-else>-</div>
          </template>
        </px-table-column>
        <px-table-column prop="expireStatus" label="公示状态" width="100">
          <template #default="scope">
            <px-tag v-if="scope.row.expireStatus === 'UNEXPIRE'" type="info">{{ scope.row.expireStatusDesc }}</px-tag>
            <px-tag v-else-if="scope.row.expireStatus === 'INEXPIRE'" type="success">
              {{ scope.row.expireStatusDesc }}
            </px-tag>
            <px-tag v-else-if="scope.row.expireStatus === 'EXPIRE'" type="danger">{{ scope.row.expireStatusDesc }}</px-tag>
            <div v-else>-</div>
          </template>
        </px-table-column>
        <px-table-column prop="expireTime" label="公示到期时间" width="120" />
        <px-table-column prop="createByName" label="创建人" width="180" />
        <px-table-column prop="createTime" label="创建时间" min-width="170" />
        <px-table-column align="center" label="操作" width="190" fixed="right">
          <template #default="scope">
            <div class="flex-row">
              <px-tooltip v-if="scope.row.publishStatus === 'UNPUBLISH'" content="发布" placement="top">
                <px-button v-has="'ALL_BENCH_TASK_ANNOUNCEMENT_PUBLISH'" link type="primary" icon="Position" @click="handlePublish(scope.row)" />
              </px-tooltip>
              <px-tooltip class="box-item" content="新增日程" placement="top">
                <px-button
                  v-if="!scope.row.taskId && scope.row.isPublishRange && scope.row.publishStatus === 'PUBLISH'"
                  v-has="'ALL_BENCH_TASK_ANNOUNCEMENT_ADD_CD'"
                  link
                  type="primary"
                  @click="AddCanlendar(scope.row)"
                >
                  <AddSvg class="content-icon" />
                </px-button>
              </px-tooltip>
              <px-tooltip class="box-item" content="已建日程" placement="top">
                <px-button
                  v-show="scope.row.taskId && scope.row.isPublishRange && scope.row.publishStatus === 'PUBLISH'"
                  v-has="'ALL_BENCH_TASK_ANNOUNCEMENT_CD_DETAIL'"
                  link
                  type="primary"
                  @click="handleCanlendarDetail(scope.row)"
                >
                  <DetailSvg class="content-icon" />
                </px-button>
              </px-tooltip>
              <px-tooltip class="box-item" content="置顶" placement="top">
                <px-button
                  v-show="scope.row.isTop === 'NO' && scope.row.publishStatus === 'PUBLISH'"
                  v-has="'ALL_BENCH_TASK_ANNOUNCEMENT_TOP'"
                  link
                  type="primary"
                  @click="addTop(scope.row)"
                >
                  <DingSvg class="ding" />
                </px-button>
              </px-tooltip>
              <px-tooltip class="box-item" content="取消置顶" placement="top">
                <px-button
                  v-show="scope.row.isTop === 'YES' && scope.row.publishStatus === 'PUBLISH'"
                  v-has="'ALL_BENCH_TASK_ANNOUNCEMENT_NOTOP'"
                  link
                  type="primary"
                  @click="cancelTop(scope.row)"
                >
                  <NoTopSvg class="content-icon" />
                </px-button>
              </px-tooltip>
              <px-tooltip v-if="scope.row.publishStatus === 'PUBLISH'" content="撤回" placement="top">
                <px-button v-has="'ALL_BENCH_TASK_ANNOUNCEMENT_RETRACT'" link type="danger" icon="Remove" @click="handleRepeal(scope.row)" />
              </px-tooltip>
              <px-tooltip content="详情" placement="top">
                <px-button v-has="'ALL_BENCH_TASK_ANNOUNCEMENT_DETAIL'" link type="primary" icon="Tickets" @click="handleDetail(scope.row)" />
              </px-tooltip>
              <px-tooltip v-if="scope.row.publishStatus === 'UNPUBLISH'" content="编辑" placement="top">
                <px-button v-has="'ALL_BENCH_TASK_ANNOUNCEMENT_EDIT'" link type="primary" icon="EditPen" @click="handleEdit(scope.row)" />
              </px-tooltip>
              <px-tooltip v-if="scope.row.publishStatus === 'UNPUBLISH'" content="删除" placement="top">
                <px-button v-has="'ALL_BENCH_TASK_ANNOUNCEMENT_DELE'" link type="danger" icon="Delete" @click="handleDelete(scope.row)" />
              </px-tooltip>
            </div>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="equip-table-pagination"
        :total="total"
        @pagination="queryTable"
      />
      <!-- 新增日程 -->
      <AddSchedule
        v-model:dialogVisible="addScheduleVisible"
        :desc="scheduleDetailData?.title"
        :day="targetDay"
        :customSubmit="customSubmit"
        @refresh="queryTable"
      />
      <!-- 手动添加日程的详情 -->
      <ScheduleDetail v-if="scheduleDetailData" @refresh="queryTable" v-model:dialogVisible="scheduleDetailVisible" :data="scheduleDetailData" />
    </div>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "ALL_BENCH_TASK_ANNOUNCEMENT_MANEGE"
});
import {
  cancelTopAnnouncement,
  create_8,
  createTopAnnouncement,
  deleteAnnouncement,
  getTask,
  pageAnnouncement,
  publishAnnouncement,
  readAnnouncement,
  repealAnnouncement
} from "@/api/bench";
import AddSvg from "@/assets/svg/bench/add.svg?component";
import DetailSvg from "@/assets/svg/bench/detail.svg?component";
import DingSvg from "@/assets/svg/bench/ding.svg?component";
import NoTopSvg from "@/assets/svg/bench/noTop.svg?component";
import { stringTrimOfParams } from "@/utils/common";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import AddSchedule from "../../task/canlendar/components/AddSchedule/index.vue";
import ScheduleDetail from "../../task/canlendar/components/ScheduleDetail/index.vue";

const router = useRouter();
const state = reactive<any>({
  activeName: "read",
  queryParams: {
    title: "",
    pageNum: 1,
    pageSize: 20
  },
  tableData: [],
  userReaded: { readList: [], unreadList: [] },
  total: 0
});
const { activeName, queryParams, tableData, total, userReaded } = toRefs(state);

// 进入页面时触发
onMounted(async () => {
  queryTable();
});
// ----日程相关start---
const scheduleDetailVisible = ref(false);
const scheduleDetailData = ref();
// 打开日程详情
const handleCanlendarDetail = async params => {
  scheduleDetailVisible.value = true;
  const data = await getTask({
    taskId: params.taskId
  });
  scheduleDetailData.value = data;
};
const addScheduleVisible = ref(false);
const targetDay = ref();
// 新增待办日程
const AddCanlendar = data => {
  targetDay.value = new Date();
  addScheduleVisible.value = true;
  scheduleDetailData.value = data;
};
// 自定义提交日程
const customSubmit = async params => {
  await create_8({ ...params, serialNumber: scheduleDetailData.value.serialNumber });
};
// 置顶
const addTop = async row => {
  await createTopAnnouncement({ ...row });
  PxMessage.success("已置顶到个人工作台的公告中");
  queryTable();
};
// 取消置顶
const cancelTop = async row => {
  await cancelTopAnnouncement({ ...row });
  PxMessage.success("取消置顶成功");
  queryTable();
};
// ----日程相关end----
// 查询列表
const queryTable = async () => {
  const params = queryParams.value;
  const data: any = await pageAnnouncement(stringTrimOfParams(params));
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 重置筛选条件和列表
const resetTable = async () => {
  queryParams.value = {
    title: "",
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
const handleClick = async row => {
  activeName.value = "read";
  userReaded.value = { readList: [], unreadList: [] };
  const data = await readAnnouncement({ id: row.id, serialNumber: row.serialNumber });
  userReaded.value = data;
};
// 打开详情
const handleDetail = row => {
  const { id = "", serialNumber = "" } = row;
  router.push(`/all/bench/task/announcement/detail?pageType=2&id=${id}&serialNumber=${serialNumber}`);
};
// 返回公告列表
const handleManage = () => {
  router.push("/all/bench/home");
};
// 编辑或新增公告
const handleEdit = (row?: any) => {
  if (row) {
    const { id = "", serialNumber = "" } = row;
    router.push(`/all/bench/task/announcement/editor?id=${id}&serialNumber=${serialNumber}`);
  } else {
    router.push(`/all/bench/task/announcement/editor/add`);
  }
};
// 发布
const handlePublish = async (row?: object) => {
  await publishAnnouncement(row);
  PxMessage.success("发布成功");
  queryTable();
};
// 撤回
const handleRepeal = async (row?: object) => {
  await repealAnnouncement(row);
  PxMessage.success("撤回成功");
  queryTable();
};
// 删除
const handleDelete = (row?: object) => {
  PxMessageBox.confirm(`删除后不可恢复，继续删除吗？`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await deleteAnnouncement(row);
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
.flex-row {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.equip-table-pagination {
  margin-top: 20px;
}

.px-tabs {
  margin: 0;

  :deep(.px-tabs__nav) {
    width: 100%;
    padding-bottom: 8px;
    margin: 0 0 14px;
    border-bottom: 1px solid #dfdfdf;

    .px-tabs__item {
      width: 50%;
      height: auto;
      padding: 0 !important;
      line-height: 1;
      text-align: center;
    }
  }
}
.ding {
  width: 14px;
  height: 14px;
  margin: 0 auto;
  cursor: pointer;
}
.read {
  cursor: pointer;
}

.publish {
  position: relative;
  padding-left: 12px;
  line-height: 1;
  color: #10b981;

  &::before {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 8px;
    height: 8px;
    content: "";
    background-color: #10b981;
    border-radius: 50%;
    transform: translateY(-50%);
  }
}

.upPublish {
  position: relative;
  padding-left: 12px;
  line-height: 1;
  color: #3b82f6;

  &::before {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 8px;
    height: 8px;
    content: "";
    background-color: #3b82f6;
    border-radius: 50%;
    transform: translateY(-50%);
  }
}
.upExpire {
  position: relative;
  padding-left: 12px;
  line-height: 1;
  color: #bebebe;

  &::before {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 8px;
    height: 8px;
    content: "";
    background-color: #bebebe;
    border-radius: 50%;
    transform: translateY(-50%);
  }
}
.expire {
  position: relative;
  padding-left: 12px;
  line-height: 1;
  color: #ef4444;

  &::before {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 8px;
    height: 8px;
    content: "";
    background-color: #ef4444;
    border-radius: 50%;
    transform: translateY(-50%);
  }
}
.tab-scrollbar {
  height: 200px;

  .read-name {
    position: relative;
    padding-left: 20px;

    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 4px;
      height: 4px;
      content: "";
      background: #303133;
      border-radius: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
